<template>
  <div class="flex flex-column" style="height:100%">
    <div id="AvatarDropdown" style="padding: 24px 16px 16px 24px">
      <a-avatar :size="50" icon="user" />
    </div>
    <a-menu
      :theme="theme"
      :default-selected-keys="currntMenu"
      mode="inline"
      class="flex-1"
    >
      <a-menu-item v-for="menu in menus" :key="menu.key">
        <nuxt-link :to="{ name: menu.pathName }">
          <a-icon :type="menu.icon" :style="{ fontSize: '16px' }" />
          <span>{{ $t(menu.title) }}</span>
        </nuxt-link>
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script>
import menus from '@/const/menu'

menus.map(menu => {
  menu.key = menu.pathName
  return menu
})
export default {
  data() {
    return {
      theme: 'dark',
      menuWidth: 120,
      subMenus: [],
      currentSubMenu: ''
    }
  }
}
</script>

<style></style>
